<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-10-13 16:33:11
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-10-13 17:27:20
 * @FilePath: /aibox/src/modules/center/src/income.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page">
    <div class="p_default income-wrap">
      <div class="card radius_default p_default">
        <view class="grid column_2 t_center py_default">
          <view class="grid-item">
            <view class="number h3">{{state.income}}</view>
            <label class="h6">收益</label>
          </view>
          <view class="grid-item">
            <view class="number h3">{{state.incomeCount}}</view>
            <label class="h6">总收益</label>
          </view>
        </view>
      </div>
    </div>

    <van-tabs class="tabs" v-model:active="activeName" sticky>
      <van-tab class="full" title="总数" name="all">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshAction"
          @scrolltolower="toLowerAction"
          refresher-enabled="true"
        >
          <div class="section p_sm pitch_sm income-list">
            <div class="row" v-for="item in dataList" :key="item.id">
              <div class="radius_default p_sm income">
                <!-- <div class="number">名称：<span>{{ item.name }}</span></div>
                -->
                <div class="align-items_center justify_between">
                  <div>
                    交易总数：<span class="h5">{{ item.tradeCount }}</span>
                  </div>
                  <div>
                    <span
                      class="status radius_xs"
                      :class="{
                        oline: item.status === 2,
                        offline: item.status === 1,
                        exception: item.status === 0,
                      }"
                      >状态：{{ statusFilter(item.status) }}</span
                    >
                  </div>
                </div>
                <div class="mt_xs">地址：{{ item.address }}</div>
              </div>
            </div>
          </div>
        </scroll-view>
      </van-tab>
      <van-tab class="full" title="在线" name="online" :data_status="2">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshOnlineAction"
          @scrolltolower="toLowerOnlineAction"
          refresher-enabled="true"
        >
          <div class="section p_sm pitch_sm income-list">
            <div class="row" v-for="item in onlineList" :key="item.id">
              <div class="radius_default p_sm income">
                <!-- <div class="number">名称：<span>{{ item.name }}</span></div>
                -->
                <div class="align-items_center justify_between">
                  <div>
                    交易总数：<span class="h5">{{ item.tradeCount }}</span>
                  </div>
                  <div>
                    <span
                      class="status radius_xs"
                      :class="{
                        oline: item.status === 2,
                        offline: item.status === 1,
                        exception: item.status === 0,
                      }"
                      >状态：{{ statusFilter(item.status) }}</span
                    >
                  </div>
                </div>
                <div class="mt_xs">地址：{{ item.address }}</div>
              </div>
            </div>
          </div>
        </scroll-view>
      </van-tab>
      <van-tab class="full" title="离线" name="offline" :data_status="1">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshOfflineAction"
          @scrolltolower="toLowerOfflineAction"
          refresher-enabled="true"
        >
          <div class="section p_sm pitch_sm income-list">
            <div class="row" v-for="item in offlineList" :key="item.id">
              <div class="radius_default p_sm income">
                <!-- <div class="number">名称：<span>{{ item.name }}</span></div>
                -->
                <div class="align-items_center justify_between">
                  <div>
                    交易总数：<span class="h5">{{ item.tradeCount }}</span>
                  </div>
                  <div>
                    <span
                      class="status radius_xs"
                      :class="{
                        oline: item.status === 2,
                        offline: item.status === 1,
                        exception: item.status === 0,
                      }"
                      >状态：{{ statusFilter(item.status) }}</span
                    >
                  </div>
                </div>
                <div class="mt_xs">地址：{{ item.address }}</div>
              </div>
            </div>
          </div>
        </scroll-view></van-tab
      >
      <van-tab class="full" title="异常" name="exception" :data_status="0">
        <scroll-view
          class="scroll"
          scroll-y="true"
          @refresherrefresh="refreshExceptionAction"
          @scrolltolower="toLowerExceptionAction"
          refresher-enabled="true"
        >
          <div class="section p_sm pitch_sm income-list">
            <div class="row" v-for="item in exceptionList" :key="item.id">
              <div class="radius_default p_sm income">
                <!-- <div class="number">名称：<span>{{ item.name }}</span></div>
                -->
                <div class="align-items_center justify_between">
                  <div>
                    交易总数：<span class="h5">{{ item.tradeCount }}</span>
                  </div>
                  <div>
                    <span
                      class="status radius_xs"
                      :class="{
                        oline: item.status === 2,
                        offline: item.status === 1,
                        exception: item.status === 0,
                      }"
                      >状态：{{ statusFilter(item.status) }}</span
                    >
                  </div>
                </div>
                <div class="mt_xs">地址：{{ item.address }}</div>
              </div>
            </div>
          </div>
        </scroll-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import {
  getMachinesList,
  getMachinesListByStatus,
  getIncome,
} from '@/api/machine.api';
import { usePageList } from '@/hooks/index';

export default defineComponent({
  name: 'Income',
  setup() {
    const activeName = ref('all');

    const { dataList, toLowerAction, refreshAction } =
      usePageList(getMachinesList);

    const {
      dataList: onlineList,
      toLowerAction: toLowerOnlineAction,
      refreshAction: refreshOnlineAction,
    } = usePageList(getMachinesListByStatus, {
      status: 2,
    });

    const {
      dataList: offlineList,
      toLowerAction: toLowerOfflineAction,
      refreshAction: refreshOfflineAction,
    } = usePageList(getMachinesListByStatus, {
      status: 1,
    });

    const statusFilter = (value: number) => {
      const status = ['异常', '离线', '在线'];
      return status[value];
    };

    const {
      dataList: exceptionList,
      toLowerAction: toLowerExceptionAction,
      refreshAction: refreshExceptionAction,
    } = usePageList(getMachinesListByStatus, {
      status: 0,
    });



    const state = ref({})

    onMounted(() => {
      getIncome().then(({ result }) => {
        state.value = result;
      });
    })
    return {
      activeName,
      statusFilter,
      dataList,
      toLowerAction,
      refreshAction,
      onlineList,
      toLowerOnlineAction,
      refreshOnlineAction,
      offlineList,
      toLowerOfflineAction,
      refreshOfflineAction,
      exceptionList,
      toLowerExceptionAction,
      refreshExceptionAction,
      state,
    };
  },
});
</script>

<style lang="scss" scoped>
.card {
  background: url('@/static/images/income_bg.png') center center/cover no-repeat;
}

.income-wrap {
  height: 156px;
  box-sizing: border-box;
}

.oline {
  background-color: #52c41a;
}
.offline {
  background-color: #ff4d4f;
}
.exception {
  background-color: #d8d8d8;
}

.status {
  padding: 4px;
  color: #333;
}

.tabs {
  height: calc(100% - 156px);
}
::v-deep(.tabs) {
  .van-tabs__content {
    width: 100%;
    height: calc(100% - 44px);
  }
}
.income-list {
  .income {
    background: #fff;

    .title {
      display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 2; /* 限制显示两行 */
      overflow: hidden; /* 隐藏超出范围的内容 */
      text-overflow: ellipsis; /* 使用省略号 */
    }
    .price {
      font-weight: bold;
      color: #ff4f24;
    }
  }
}
</style>
